<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录</title>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url("/assets/imgs/login.gif");
            background-size: cover;
        }

        .container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .form-wrap {
            padding: 50px;
            width: 400px;
            border-radius: 4px;
            background-color: #fff;
        }

        .form-item {
            margin-bottom: 10px;
            position: relative;
        }

        .text-right {
            text-align: right;
        }

        .form-item input {
            padding: 10px;
            width: 100%;
            height: 40px;
            box-sizing: border-box;
        }

        .btn {
            width: 100%;
            height: 40px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="form-wrap">
        <form method="post" action="/auth/login">
            <div class="form-item">
                <input type="text" name="username" value="mp" placeholder="账号"/>
            </div>
            <div class="form-item">
                <input type="text" name="password" value="123456" placeholder="密码"/>
            </div>
            <div class="form-item">
                <button type="button" class="btn">登 录</button>
            </div>
            <p class="text-right">
                <small>没有账户？</small><a href="/register.html">点此注册</a>
            </p>
        </form>
    </div>
</div>

<script src="/assets/js/jquery.min.js"></script>
<script>
    $(function () {
        $('button[type="button"]').on("click", submitHandler);
    });

    // 响应提示
    function tipHandler(errorMsg) {
        alert(errorMsg)
    }

    // 用户登录
    function submitHandler() {
        var $username = $('input[name="username"]');
        var $password = $('input[name="password"]');

        var data = {
            username: $username.val(),
            password: $password.val()
        }

        $.ajax({
            type: 'post',
            url: '/auth/login',
            data: JSON.stringify(data),
            contentType: "application/json;charset=utf-8",
            success: function (res) {
                if (res.code === 200) {
                    var data = res.data;
                    console.log(data);

                    // 跳到 视图页面 或 Vue/React项目
                    location.href = "/home";
                } else {
                    tipHandler(res.msg);
                }
            },
            error: function (res) {
                tipHandler(res.responseJSON.msg);
            }
        });
    }
</script>
</body>
</html>